<template>
  <view
    class="item"
    :class="!item.inventory && 'filter-grayscale'"
    @click="navTo"
  >
    <view class="image-box">
      <fr-image
        class="image"
        :src="item.picture"
        mode="aspectFit"
        loading-ing-img="looming"
        lazy-load
      />
    </view>
    <view class="name" style="padding-bottom: 2%">
      <p class="itemgroup-text">
        {{ item.prizeName }}
      </p>
      <view class="flex justify-between" style="position: relative">
        <view class="itemgroup-price flex-direction-column">
          <view class="left">
            <span class="price"> 积分: {{ item.integral }} </span>
          </view>

          <view class="right">
            <span style="color: #999; font-size: 24rpx"
              >库存{{ item.residueInventory }}件</span
            >
          </view>
        </view>

        <slot name="couponBtn"></slot>
      </view>
    </view>
  </view>
</template>

<script>
  // import * as Utils from '@/utils/index.js';
  export default {
    name: 'CardListItem',
    props: {
      item: {
        type: Object,
        require: true,
      },
      overdueTime: {
        type: String,
        default: '',
      },
      isHave: {
        type: Boolean,
        default: false,
      },
      /**
       * 数量
       */
      sum: {
        type: Number,
        default: 1,
      },
      showButton: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {};
    },
    computed: {},
    methods: {
      navTo() {
        this.$emit('navTo');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: #fff;
    overflow: hidden;
    .image-box {
      width: 100%;
      height: 0;
      padding-top: 89%;
      position: relative;
      .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .name {
      font-size: 28rpx;
      font-weight: 600;
      line-height: 36rpx;
      text-align: left;
      // padding: 12rpx 14rpx;
      padding: 6% 7%;
      color: #3d4145;
      // text {
      //   text-overflow: -o-ellipsis-lastline;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   display: -webkit-box;
      //   -webkit-line-clamp: 3;
      //   line-clamp: 3;
      //   -webkit-box-orient: vertical;
      // }
    }
    .itemgroup-text {
      // height: 72rpx;
      // margin-bottom: 8rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .itemgroup-price {
      display: flex;
      justify-content: space-between;
      padding: 10rpx 0;
      .price {
        font-size: 24rpx;
        color: #c8291a;
      }
    }
  }
</style>
